import React, { memo, useEffect, useState } from "react";

import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { getTopListIdNew } from "../../pages/discover/d-pages/recommend/store/actionType";

import { addSongId } from "../../pages/player/store/actionType";

import { getSizeImage } from "@/utils/format-utils";

import { getSongDetailsMessage } from "../../pages/player/store/actionType";

import { TopRankingWrap } from "./style";
import { NavLink } from "react-router-dom";

export default memo(function TopRanking(props) {
  const [id, setId] = useState();

  const info = props.topLists;

  const infoId = props.topLists.id;

  const dispatch = useDispatch();

  const getMusicLists = (ids) => {
    dispatch(getSongDetailsMessage(ids));
    dispatch(addSongId(ids));
  };

  useEffect(() => {
    dispatch(getTopListIdNew(infoId));
  }, [dispatch, infoId]);

  useEffect(() => {
    if (id != undefined) {
      dispatch(addSongId(id));
    }
  }, [dispatch, id]);

  const state = useSelector(
    (state) => ({
      topUpList: state.getIn(["recommend", "topUpList"]),
      topNewList: state.getIn(["recommend", "topNewList"]),
      topOriginList: state.getIn(["recommend", "topOriginList"]),
    }),
    shallowEqual
  );

  const newdata = Object.values(state);

  return (
    <TopRankingWrap>
      <div className="rankTop">
        <NavLink
          to={{
            pathname: "/discover/ranking",
            search: "?id=" + info.id,
          }}
        >
          <img
            className="topRankingImg"
            src={getSizeImage(info.coverImgUrl, 80)}
            alt=""
          />
        </NavLink>
        <div className="rankTopBox">
          <div className="rankTopBox-a">
            <NavLink
              to={{
                pathname: "/discover/ranking",
                search: "?id=" + info.id,
              }}
              className="rankTopName"
            >
              {info.name}
            </NavLink>
            <div>
              <button className="btn play sprite_02"></button>
              <button className="btn favor sprite_02"></button>
              <a> </a>
            </div>
          </div>
        </div>
      </div>
      <div className="rankItemBox">
        <ul>
          {!newdata
            ? null
            : newdata[0].length == 0 ||
              newdata[1].length == 0 ||
              newdata[2].length == 0
            ? ""
            : info.id == 19723756
            ? newdata[0].tracks.slice(0, 10).map((item, index) => {
                return (
                  <li key={item.al.id + Math.random()}>
                    <div className="rankFlex">
                      <span className={index <= 2 ? "no no-top" : "no"}>
                        {index + 1}
                      </span>
                      <NavLink
                        to={{
                          pathname: "/song",
                          search: "?id=" + item.id,
                        }}
                        className="rankName"
                      >
                        {item.name}
                      </NavLink>
                      <div className="playBox">
                        <button
                          onClick={(e) => getMusicLists(item.id)}
                          className="btn sprite_02 play"
                        ></button>
                        <button
                          onClick={(e) => setId(item.id)}
                          className="btn sprite_02 addto"
                        ></button>
                        <button className="btn sprite_02 favor"></button>
                      </div>
                    </div>
                  </li>
                );
              })
            : info.id == 3779629
            ? newdata[1].tracks.slice(0, 10).map((item, index) => {
                return (
                  <li key={item.al.id + Math.random()}>
                    <div className="rankFlex">
                      <span className={index <= 2 ? "no no-top" : "no"}>
                        {index + 1}
                      </span>
                      <NavLink
                        to={{
                          pathname: "/song",
                          search: "?id=" + item.id,
                        }}
                        className="rankName"
                      >
                        {item.name}
                      </NavLink>
                      <div className="playBox">
                        <button
                          onClick={(e) => getMusicLists(item.id)}
                          className="btn sprite_02 play"
                        ></button>
                        <button
                          onClick={(e) => setId(item.id)}
                          className="btn sprite_02 addto"
                        ></button>
                        <button className="btn sprite_02 favor"></button>
                      </div>
                    </div>
                  </li>
                );
              })
            : newdata[2].tracks.slice(0, 10).map((item, index) => {
                return (
                  <li key={item.al.id + Math.random()}>
                    <div className="rankFlex">
                      <span className={index <= 2 ? "no no-top" : "no"}>
                        {index + 1}
                      </span>
                      <NavLink
                        to={{
                          pathname: "/song",
                          search: "?id=" + item.id,
                        }}
                        className="rankName"
                      >
                        {item.name}
                      </NavLink>
                      <div className="playBox">
                        <button
                          onClick={(e) => getMusicLists(item.id)}
                          className="btn sprite_02 play"
                        ></button>
                        <button
                          onClick={(e) => setId(item.id)}
                          className="btn sprite_02 addto"
                        ></button>
                        <button className="btn sprite_02 favor"></button>
                      </div>
                    </div>
                  </li>
                );
              })}
        </ul>
      </div>
    </TopRankingWrap>
  );
});
